<template>
	<view class="container">
		<top-back-navbar position="fixed" :title="'股券'+(isBusiness?'买入':'卖出')" background="#ffffff" color="#000000"></top-back-navbar>
		<view>
			<view class="num_box">
				<!-- <view class="num_box-left">
					<view class="num_box-leftitem">趋势图</view>
				</view> -->
				<view class="num_box-right">
					<view class="num_box-right-text" :class="[isBusiness?'num_box-right-text-active':'num_box-right-text-import']" @click="changeItem(1)"></view>
					<view class="num_box-right-text" :class="[!isBusiness?'num_box-right-text-active1':'num_box-right-text-import1']" @click="changeItem(2)"></view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="jy-yj">
				<image mode="heightFix" :src="`/static/images/xfdzh/gq_mc_title.png`" class="jy-yj-title"></image>
				<view class="jy-yj-list-bg">
					<view class="jy-yj-list">
						<view class="jy-yj-item">
							<view class="list-title list-title-dis text-shadow"><text>{{isBusiness?'买入总数':'可卖个数'}}</text></view>
							<view class="list-num text-shadow">{{(isBusiness?buyObj.zong:sellObj.can_sell_num) || 0}}</view>
						</view>
						<view class="jy-yj-item" @click="$u.route(`/page_x/member/mxlist`)">
							<view class="list-title list-title-dis text-shadow"><text>可用资金</text><text class="button"></text></view>
							<view class="list-num text-shadow">{{'¥'+buyObj.credit2 || 0.00}}</view>
						</view>
					</view>
					<view class="jy-yj-list">
						<view class="jy-yj-item">
							<view class="list-title text-shadow">今日{{isBusiness?'买入':'卖出'}}数</view>
							<view class="list-num text-shadow">{{(isBusiness?buyObj.jinri:sellObj.jinri) || 0}}</view>
						</view>
						<view class="jy-yj-item" @click="$u.route(`/page_x/member/mxlist`)">
							<view class="list-title list-title-dis text-shadow">股券数量<text class="button"></text></view>
							<view class="list-num text-shadow">{{(isBusiness?buyObj.huo:sellObj.huo) || 0}}</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="jy-yjs gp-group" style="margin-top: 30rpx;">
				<view class="gp-group-item"> 
					<view class="gp-group-title text-shadow">¥{{(isBusiness?buyObj.huo_price:sellObj.huo_price) || '0.00'}}</view>
					<view class="gp-group-boxs">
						<view class="gp-group-input-box">
							<view class="gp-group-input-text text-shadow">{{isBusiness?'买入':'卖出'}}数量</view>
							<input class="gp-group-input" v-model="num" placeholder-class="gp-group-input-placeholder" placeholder="请输入" type="number">
							<view class="gp-group-input-num text-shadow">个</view>
						</view>
						<view class="gp-group-input-box">
							<view class="gp-group-input-text text-shadow">输入金额</view>
							<input class="gp-group-input" disabled v-model="money" placeholder-class="gp-group-input-placeholder" placeholder="请输入" type="number">
							<view class="gp-group-input-num text-shadow">个</view>
						</view>
						<view class="gp-group-input-box">
							<view class="gp-group-input-text text-shadow">{{isBusiness?'消耗资金':'预计收益'}}</view>
							<input disabled class="gp-group-input" v-model="total" placeholder-class="gp-group-input-placeholder" placeholder="资金" type="number">
							<view class="gp-group-input-num text-shadow">元</view>
						</view>
						<!-- <view class="gp-group-input-button" @click="submit(1)">确定{{isBusiness?'买入':'卖出'}}</view> -->
						<image mode="widthFix" :src="`/static/images/xfdzh/${isBusiness?'gq_qd_mr':'gq_qd_mc'}.png`" class="gp-group-input-button" @click="submit(1)"></image>
					</view>
				</view>
				<view class="gp-group-item">
					<view class="gp-group-title1 text-shadow">{{isBusiness?'今日可买总量':'待买总量'}}：{{(isBusiness?buyObj.kemai:sellObj.kemai) || 0}}</view>
					<view class="gp-group-boxs">
						<view class="gp-group-header">
							<view class="gp-group-header-text" :class="[true?'yf-col-6':'yf-col-4']">价格</view> 
							<view class="gp-group-header-text" :class="[true?'yf-col-6':'yf-col-4']">数量</view>
							<!-- <view class="gp-group-header-text yf-col-4" v-if="!isBusiness">状态</view> -->
						</view>
						<scroll-view class="gp-scroll-view" scroll-y>
							<view class="gp-group-row" v-for="(item,index) in todayList" :key="index">
								<view class="gp-group-col text-shadow" :class="[true?'yf-col-6':'yf-col-4']" :style="{color:item.color == 'black'?'#ffffff':item.color}">{{item.price}}</view>
								<view class="gp-group-col text-shadow" :class="[true?'yf-col-6':'yf-col-4']" style="color:#fff;">{{item.num}}</view>
								<!-- <view class="gp-group-col text-shadow yf-col-4" v-if="!isBusiness" :class="[item.status == '转售中'?'zs-color':'yzs-color']" style="color:#fff;">{{item.status}}</view> -->
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- v-if="showList.length>0"  showList-->
			<view class="sale-group" v-if="showList.length>0">
				<!-- <view class="sale-title">{{'仓单'+(isBusiness?'买入记录':'排单日期')}}</view> -->
				<image mode="heightFix" :src="`/static/images/xfdzh/${isBusiness?'gq_wtjl':'gq_pdjl'}.png`" class="sale-title"></image>
				<view class="sale-list-height">
					<view class="yf-col-1 sale-list-font0" v-if="!isBusiness">名称</view>
					<view class="yf-col-3 sale-list-font0">日期</view>
					<view class="yf-col-2 sale-list-font0">委托总数</view>
					<view class="yf-col-2 sale-list-font0">已成交数</view>
					<view class="yf-col-3 sale-list-font0">委托价格</view>
					<view class="yf-col-2 sale-list-font0">操作</view>
				</view>
				<view class="sale-list" v-for="(item, index) in showList" :key="index">
					<view class="yf-col-3 sale-list-font0">item.createtime</view>
					<view class="yf-col-2 sale-list-font0">{{item.num}}</view>
					<view class="yf-col-2 sale-list-font0">{{isBusiness?item.ynum:'¥'+item.cang_price}}</view>
					<view class="yf-col-3 sale-list-font0">¥{{isBusiness?item.price:item.mc_jz}}</view>
					<view class="yf-col-2 sale-list-font4">
						<view class="buttons" :class="[isBusiness?'buttons-cx':'',!isBusiness && item.status == '未到期'?'buttons-wdq':'',!isBusiness && item.status == '已到期'?'buttons-mc':'']"  @click="submit(2,item)"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showList: [],
				todayList:[],
				openid: '',
				num:'',
				money:'',
				real_name: '',
				real_head_img: '',
				create_time: '',
				buyObj: {},
				sellObj:{},
				isBusiness:true,
				mySellListId:null
			}
		},
		computed:{
			total:function(){
				if(this.num>0 && this.money>0){
					return (this.num*this.money).toFixed(2);
				}else{
					return ''
				}
			}
		},
		onLoad: function() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setajax()
				},
			});
		},
		methods: {
			changeItem(flag){
				this.isBusiness=flag == 1?true:false;
				this.resultMethod()
			},
			resultMethod(){
				this.num='';
				if(this.mySellListId){
					this.mySellListId=null;
				}
				this.money=parseFloat(this.isBusiness?this.buyObj.huo_price:this.sellObj.huo_price).toFixed(2)
				this.setajax();
			},
			copyText(text) {
				uni.setClipboardData({
					data: text, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			// 买入卖出
			setajax() {
				const url=this.isBusiness?'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cd_mairu&app=1':
					  '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cd_maichu&app=1';
				uni.request({
					url: this.$BASE_URL+url,
					method: 'POST',
					data: {
						openid: this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res.data);
						if (res.data.error ==0 && this.lodash.isPlainObject(res.data)) {
							if(this.isBusiness){
								this.buyObj = res.data;
								this.showList=Array.isArray(res.data.buy)?res.data.buy:[];
								this.todayList=Array.isArray(res.data.buy_list)?res.data.buy_list:[];
								this.money=parseFloat(res.data.huo_price).toFixed(2)
							}else{
								this.sellObj = res.data;
								let showList=Array.isArray(res.data.my_sell_list)?res.data.my_sell_list:[];
								showList.forEach(item=>{
									item.mc_jz=parseFloat(item.cang_price)*parseFloat(item.num).toFixed(2)
								})
								this.showList=showList;
								this.todayList=Array.isArray(res.data.sell_list)?res.data.sell_list:[];
								this.money=parseFloat(res.data.huo_price).toFixed(2) 
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			submit(flag,data){
				if(flag == 2){
					if(!this.isBusiness && data.status == '未到期'){
						return false;
					}
				}
				uni.showModal({
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮文字 
					title: '提示',
					content: '是否确定此操作?',
					success: res => {
						if (res.confirm) {
							if(flag == 1){
								this.submitMethod()
							}else{
								// 
								if(this.isBusiness){
									this.canelMethod(data.id)
								}else{
									if(data.status == '已到期'){
										this.num=parseFloat(data.num);
										this.money=parseFloat(data.cang_price);
										this.mySellListId=data.id;
									}
								}
								
							}
						}
					}
				});
			},
			submitMethod(){
				if(!this.num || this.num<=0){
					return uni.showToast({title: '请输入数量',icon: 'none',duration: 2000})
				}
				if(!this.money || this.money<=0){
					return uni.showToast({title: '请输入金额',icon: 'none',duration: 2000})
				}
				uni.showLoading({title: '加载中...'});
				const url=this.isBusiness?'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cd_buy&app=1':
					  '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cd_sell&app=1';
				const data={
						openid: this.openid,
						num:this.num,
						price:this.money
					}
				if(this.mySellListId)data.id=this.mySellListId;
				uni.request({
					url: this.$BASE_URL+url,
					method: 'POST',
					data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res.data);
						if (res.data.error ==0) {
							uni.showToast({title: '操作成功',icon: 'success',duration: 2000})
						}else{
							uni.showToast({title: res.data.message,icon: 'none',duration: 2000})
						}
						this.resultMethod();
					},
					fail: () => {
						this.resultMethod();
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			canelMethod(id){
				uni.showLoading({title: '加载中...'});
				const url=this.isBusiness?'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cd_buy_no&app=1':
					  '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cd_sell_no&app=1';
				uni.request({
					url: this.$BASE_URL+url,
					method: 'POST',
					data: {
						openid: this.openid,
						id:id
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res.data);
						if (res.data.error ==0) {
							uni.showToast({title: '操作成功',icon: 'success',duration: 2000})
							this.resultMethod()
						}else{
							uni.showToast({title: res.data.message,icon: 'none',duration: 2000})
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
			
		}
	}
</script>

<style lang="scss">
	page {
	 background:url('/static/images/xfdzh/gq_bg.png') center no-repeat;
	 background-size: 100% 100%;
	 min-height: 100vh;
	}

	.container {
		width: 100%;
		box-sizing: border-box;
	}

	.content {
		padding: 0 30rpx 0 30rpx;
		// overflow: hidden;
	}
	.jy-yjs{
		// padding: 30rpx;
	}
	.gp-group{
		display: flex;
		.gp-group-item{
			width: 50%;
		}
		.gp-group-title{
			height: 42rpx;
			font-size: 32rpx;
			font-weight: bold;
			background: url('/static/images/xfdzh/gp_cd_price1.png') 10rpx center no-repeat;
			background-size:auto 42rpx;
			line-height: 42rpx;
			color:#fff;
			text-align: right;
			padding-right:10rpx;
		}
		.gp-group-title1{
			height: 42rpx;
			line-height: 42rpx;
			font-size: 28rpx;
			color:#fff;
			padding-left:30rpx;
		}
		.gp-group-boxs{
			padding:30rpx 0;
		}
		.gp-group-input-box{
			height: 82rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 10rpx 20rpx 30rpx;
			margin-bottom: 30rpx;
			background: url('/static/images/xfdzh/gq_input.png') center no-repeat;
			background-size:100% 100%;
		}
		.gp-group-input-text{  
			width: 110rpx;
			font-size:24rpx;
			white-space: nowrap;
			color:#ffffff;
		}
		.gp-group-input{
			flex:1;
			height: 100%;
			text-align: right;
			font-size: 24rpx;
			color:#ffffff;
			padding-right:20rpx;
			text-shadow:0 0 5rpx #20212c,0 0 10rpx #20212c,0 0 15rpx #20212c;
		}
		.gp-group-input-placeholder{
			color:#ffffff;
			text-shadow:0 0 5rpx #20212c,0 0 10rpx #20212c,0 0 15rpx #20212c;
		}
		.gp-group-input-num{
			font-size: 24rpx;
			color:#ffffff;
		}
		.gp-group-input-button{
			height: 76rpx;
			line-height: 76rpx;
			// font-size: 28rpx;
			// color:#ffffff;
			// text-align: center;
			// background-color: #3759a7;
			// border-radius: 10rpx;
			width: 100%;
		}
		.gp-group-header{
			display: flex;
			align-items: center;
			padding-bottom:20rpx;
			.gp-group-header-text{
				font-size: 24rpx;
				color:#ffffff;
				text-align: center;
			}
		}
		.gp-scroll-view{
			width: 100%;
			height: 280rpx;
			.gp-group-row{
				display: flex;
				align-items: center;
			}
			.gp-group-col{
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
			}
			.zs-color{
				color:#e3b762;
			}
			.yzs-color{
				color:#ffffff;
			}
		}  
	} 

	.num_box {
		padding: 40rpx 40rpx 20rpx 40rpx;
		.num_box-left {
			.num_box-leftitem {
				height: 60rpx;
				text-align: center;
				border-radius: 10rpx;
				background-color: #a9a7b7;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #fff;
				width: 150rpx;
			}
		}

		.num_box-right {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.num_box-right-text {
			height: 100rpx;
			width: 48%;
		}
		
		.num_box-right-text-import{
			background: url('/static/images/xfdzh/gq_mr.png')center no-repeat;
			background-size: 100% 100%;
		}
		.num_box-right-text-active{
			background: url('/static/images/xfdzh/gq_mr_active.png')center no-repeat;
			background-size: 100% 100%;
		}
		
		
		.num_box-right-text-import1{
			background: url('/static/images/xfdzh/gq_mc.png')center no-repeat;
			background-size: 100% 100%;
		}
		.num_box-right-text-active1{
			background: url('/static/images/xfdzh/gq_mc_active.png')center no-repeat;
			background-size: 100% 100%;
		}

		.num_box-right-num {
			font-size: 50rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}
	.text-shadow{
		text-shadow:0 0 5rpx #20212c,0 0 10rpx #20212c,0 0 15rpx #20212c;
	}
	.jy-yj {
		// padding: 0 20rpx;
		.jy-yj-title {
			height: 46rpx;
			// margin:10rpx 0 10rpx 10rpx;
		}
		.jy-yj-list-bg{
			background: url('/static/images/xfdzh/gq_info_bg.png') center no-repeat;
			background-size: 100% 100%;
			padding:20rpx 20rpx 20rpx 40rpx;
		}
		.jy-yj-list {
			display: flex;
			align-items: center;
			.jy-yj-item {
				width: 50%;
				line-height: 30rpx;
				padding:0 20rpx;
				.list-title-dis{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.list-title {
					padding: 10rpx 0;
					font-size: 30rpx;
					color: #ffffff;
				}

				.list-num {
					font-size: 36rpx;
					color: #ffffff;
					font-weight: bold;
				}
				.button{
					width: 110rpx;
					height: 54rpx;
					background: url('/static/images/xfdzh/gq_mx_btn.png')center no-repeat;
					background-size: 100% 100%;
				}
			}

			.border-left {
				border-left: 1px solid #f2f5fa;
			}

			.border-top {
				border-top: 1px solid #f2f5fa;
			}

			.padding-left {
				padding-left: 40rpx;
			}
		}
	}

	.sale-group {
		// margin-top: 30rpx;
	
		.sale-title {
			// font-size: 32rpx;
			// font-weight: bold;
			// color:#1b1e47;
			height: 40rpx;
		}
		.sale-list-height{
			height: 50rpx;
			display: flex;
			align-items: center;
			padding:0 4rpx;
		}
		.sale-list {
			height: 80rpx;
			// background-color: #FFFFFF;
			// border-radius: 20rpx;
			// box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);
			// margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			padding:0 4rpx;
		}
		.sale-list-col-1{
			width: 8.33%;
		}
		.sale-list-col-2 {
			width: 16.66%;
		}
		.sale-list-col-3{
			width: 23.9%;
		}
		.sale-list-font0{
			font-size: 24rpx;
			text-align: center;
			font-weight: bold;
			color:#fff;
			text-shadow:0 0 5rpx #20212c,0 0 10rpx #20212c,0 0 15rpx #20212c;
		}
		.sale-list-font1{
			font-size: 24rpx;
			font-weight: bold;
			text-align: center;
		}
		.sale-list-font2{
			font-size: 24rpx;
			color:#787879;
			text-align: center;
		}
		.sale-list-font3{
			font-size: 24rpx;
			color:#b91b22;
			font-weight: 600;
		}
		.sale-list-font4{
			display: flex;
			align-items: flex-end;
			.buttons{
				width: 110rpx;
				height: 50rpx;
				// line-height: 50rpx;
				// text-align: center;
				// font-size: 24rpx;
				// color:#ffffff;
				// background-color: #b91b22;
				// border-radius: 10rpx;
			}
			.buttons-cx{
				background: url('/static/images/xfdzh/gq_cx.png')center no-repeat;
				background-size: 100% 100%;
			}
			.buttons-mc{
				background: url('/static/images/xfdzh/cd_list_mc.png')center no-repeat;
				background-size: 100% 100%;
			}
			.buttons-wdq{
				background: url('/static/images/xfdzh/cd_wdq.png')center no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>
